<template>
	<view class="box" :style="theme">
		<!-- 类型 -->
		<view class="box_config">
			<scroll-view scroll-x class="box_tabs">
				<view class="box_tabs_item" :class="item.is ? 'active' : ''" v-for="(item, index) in cate" :key="index"
					@click="changeCate(item)">{{item.name}}</view>
			</scroll-view>
		</view>
		<!-- 列表 -->
		<view class="box_list" v-if="list && list.length != 0">
			<view class="box_list_item" v-for="(item, index) in list" :key="index" @click="detailBtn(item)">
				<view class="box_list_item_title">
					<view class="box_list_item_title_left">
						<text v-if="item.name" class="limit-3-line">{{item.name}}</text>
						<text v-if="item.createTime">兑换时间：{{item.createTime}}</text>
					</view>
					<view class="box_list_item_title_right">
						<text v-if="item.status == 0">待取货</text>
						<text v-if="item.status == 1">已取货</text>
					</view>
				</view>
				<view class="box_list_item_zf">
					<view class="box_list_item_zf_left">
						<text>兑换积分：</text>
						<text>{{item.price}}</text>
					</view>
					<view class="box_list_item_zf_right">
						<view class="box_list_item_zf_right_q">查看详情</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				active: 0,
				status: 'nomore',
				noClick: true,
				id: '',
				page: 1, //页码
				end: false, //控制是否还能切换下一页
				list: [], //订单数据
				cate: [ //订单分类
					{
						name: '全部',
						id: '',
						is: true
					},
					{
						name: '待取货',
						id: '0',
						is: false
					},
					{
						name: '已取货',
						id: '1',
						is: false
					}
				]
			}
		},
		onLoad() {
			this.firstQueryTime = this.$app.firstQueryTime()
		},
		onShow() {
			this.reset()
		},
		onPullDownRefresh() {
			this.reset()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			detailBtn(e) {
				this.jump('/pages/integral/orderDetail?id=', e.id)
			},
	
			changeCate(e) {
				let arr = [...this.cate]
				arr.forEach(item => {
					if (item.id == e.id) {
						item.is = true
					} else {
						item.is = false
					}
				})
				this.cate = arr
				this.id = e.id
				this.reset()
			},
			getList() {
				this.$app.ajax({
					api: this.$api.goodsOrderMember(),
					data: {
						pagination: {
							page: this.page,
							firstQueryTime: this.firstQueryTime,
							rows: 10
						},
						param: {
							status: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = [...this.list, ...res.recordList]
						}
					}
				}).catch(() => {})

			},
			reset() {
				this.list = [];
				this.page = 1;
				this.firstQueryTime = this.$app.firstQueryTime()
				this.end = false;
				this.getList()
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}
		}

	}
</script>
<style scoped lang="scss">
	.box_config {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 10;
	}

	.box_tabs {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.box_tabs {
		white-space: nowrap;
	}

	.box_tabs_item {
		display: inline-flex;
		padding: 18rpx 28rpx;
		background: $bjColor;
		border-radius: 30rpx;
		margin-right: 18rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #111111;
	}

	.active {
		background: $color;
		font-weight: 400;
		color: #FFFFFF;
	}

	.box_list {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.box_list_item {
		padding: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 25rpx;
	}

	.box_list_item_title {
		display: flex;
		justify-content: space-between;
	}

	.box_list_item_title_left {
		display: flex;
		flex-direction: column;
		text {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
			&:first-child {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				margin-top: 0;
			}
		}
	}


	.box_list_item_title_right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
		margin-left: 10rpx;
		text {
			font-size: 26rpx;
			font-weight: 500;
			color: $color;
			&.hui {
				color: #666666;
				font-weight: 400;
			}
		}
	}

	.box_list_item_zf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.box_list_item_zf_left text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_list_item_zf_left text:nth-child(2) {
		font-size: 30rpx;
		font-weight: 600;
		color: $color;
	}

	.box_list_item_zf_right {
		display: flex;
		align-items: center;
	}

	.box_list_item_zf_right_q {
		padding: 12rpx 28rpx;
		border-radius: 26rpx;
		border: 1px solid #B2B2B2;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #777777;
	}
</style>
